<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>后台管理系统</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Lobibox CSS
        ============================================ -->
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">

    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">


    <!-- DatetimePicker CSS
        ============================================ -->
    <link rel="stylesheet" href="css/datetimepicker/bootstrap-datetimepicker.min.css">

    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">

    <!-- form CSS
		============================================ -->
    <link rel="stylesheet" href="css/form/all-type-forms.css">

    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>

    <style>
        .modal-header {
            text-align: center;
        }

        .modal-header > button {
            float: left;
        }

        .modal-header i {
            margin-right: 10px;
            color: crimson;
        }

        .chat_room {
            height: 400px;
            margin-top: 10px;
            overflow: auto;
        }

        .chatText {
            border: 0;
            border-radius: 5px;
            background-color: rgba(241, 241, 241, .98);
            height: 100px;
            padding: 10px;
            margin-bottom: 10px;
            resize: none;
        }

        ul {
            padding-inline-start: 0;
        }

        li {
            list-style-type: none;
            margin: 4px 0;
        }

        p {
            padding: 5px;
        }

        .she {
            text-align: left;
        }

        .me {
            text-align: right;
        }

        .she span {
            text-align: center;
            margin: 2px 4px;
            padding: 10px 4px;
            background-color: pink;
            border-radius: 50%;
            color: #FFFFFF;
        }

        .she p {
            display: inline-block;
            background-color: #07C160;
            border-radius: 10px 10px 10px 0;
            color: #FFFFFF;
        }

        .me span {
            text-align: center;
            margin: 2px 4px;
            padding: 10px 11px;
            background-color: skyblue;
            border-radius: 50%;
            color: #FFFFFF;
        }

        .me p {
            display: inline-block;
            background-color: #07C160;
            border-radius: 10px 10px 0 10px;
            color: #FFFFFF;
        }

        #sc {
        }

        #sc_left {
            padding: 0;
        }

        #sc_right {
        }

        .c {
            display: none;
        }
    </style>
</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Start Left menu area -->
<div class="left-sidebar-pro">
    <nav id="sidebar" class="">
        <div class="sidebar-header">
            <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt="" /></a>
            <strong><a href="index.html"><img src="img/logo/logosn.png" alt="" /></a></strong>
        </div>
        <div class="left-custom-menu-adp-wrap comment-scrollbar">
            <nav class="sidebar-nav left-sidebar-menu-pro">
                <ul class="metismenu" id="menu1">
                    <li>
                        <a title="Landing Page" href="report.html" aria-expanded="false"><span class="fa fa-user-circle-o" aria-hidden="true"></span> <span class="mini-click-non">商城数据</span></a>
                    </li>
                    <li class="active">
                        <a class="has-arrow" href="index.html">
                            <span class="fa fa-id-card"></span>
                            <span class="mini-click-non">用户信息</span>
                        </a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li><a href="index.html"><span class="mini-sub-pro">用户列表</span></a></li>
                            <li><a href="goodsManager.html"><span class="mini-sub-pro">商品列表</span></a></li>
                            <li><a href="order.html"><span class="mini-sub-pro">订单管理</span></a></li>
                            <li><a href="classify.html"><span class="mini-sub-pro">类目管理</span></a></li>
                            <li><a href="sc.html"><span class="mini-sub-pro">客户服务</span></a></li>
                            <li><a href="notification.html"><span class="mini-sub-pro">通知管理</span></a></li>
                        </ul>
                    </li>
                    <li>
                        <a title="Landing Page" href="adminUser.html" aria-expanded="false"><span class="fa fa-user-circle-o" aria-hidden="true"></span> <span class="mini-click-non">系统用户</span></a>
                    </li>
                </ul>
            </nav>
        </div>
    </nav>
</div>
<!-- End Left menu area -->
<!-- Start Welcome area -->
<div class="all-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="logo-pro">
                    <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt="" /></a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-advance-area">
        <div class="header-top-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-top-wraper">
                            <div class="row">
                                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                    <div class="menu-switcher-pro">
                                        <button type="button" id="sidebarCollapse" class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 col-lg-offset-6 col-md-offse-7 col-sm-offse-6 col-xs-offse-12">
                                    <div class="header-right-info">
                                        <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                            <li class="nav-item">
                                                <div class="dropdown" id="notifyMenu">
                                                    <button type="button" class="btn btn-danger dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
                                                        <i class="fa fa-bell" aria-hidden="true"></i>
                                                        <span class="badge" id="unreadNotify">0</span>
                                                        <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu"  aria-labelledby="dropdownMenu1" v-if="notifyData.length>0">
                                                        <!--消息列表-->
                                                        <li  v-for="notify in notifyData"  >
                                                            <a href="javascript:void(0)" v-on:click="fn($event)" :value="notify.path" :nid="notify.nid">
                                                                <div class="notification-content">
                                                                    <span class="bg-info" >{{notify.updateTime}}</span>
                                                                    <h5 style="margin-top: 10px">{{notify.title}}</h5>
                                                                    <p>点击查看详细信息</p>
                                                                </div>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                    <ul class="dropdown-menu"  id="" aria-labelledby="dropdownMenu1" v-else>
                                                        <li>
                                                            <span style="font-size: 10px;color: darkgrey">暂无新的通知</span>
                                                        </li>
                                                        <li>
                                                            <a href="notification.html">查看所有通知</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="nav-item">
                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle">
                                                    <img id="headImgs" src="img/product/pro4.jpg" alt="" style="width: 26px;height: 26px;border-radius: 100%" />
                                                    <span class="admin-name" id="headName"></span>
                                                    <i class="fa fa-angle-down edu-icon edu-down-arrow"></i>
                                                </a>
                                                <ul role="menu" class="dropdown-header-top author-log dropdown-menu animated zoomIn">

                                                    <li><a onclick="logOut()"><span class="edu-icon edu-locked author-log-ic" style="cursor:pointer"></span>登出</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="padding: 20px 15px 0 15px;">
            <div style="background-color: #ffffff; border-radius: 3px; padding: 12px;">
                <!--在此添加-->
                <div id="sc" class="row">
                    <ul class="nav nav-pills nav-stacked col-lg-2" id="sc_left">
                        <!-- <li><a href="#" onclick="changChat(this)">客户<span>1</span></a></li>-->
                    </ul>
                    <div id="sc_right" class="col-lg-10">
                        <!--<div id="3" class="c">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                        onclick="closeWebSocket()"><span aria-hidden="true">&larr;</span></button>
                                <h4 class="modal-title">客户3
                                </h4>
                            </div>
                            <div class="modal-body">
                                <div class="chat_room">
                                    <ul class="message" id="3_mes">
                                        <li>
                                            <div class="she"><span>客户</span><p>你好，我是客户3</p></div>
                                        </li>
                                        <li>
                                            <div class="me"><p>你好</p><span>我</span></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="chat_out">
                                    <textarea class="form-control chatText" placeholder="联系客户..."></textarea>
                                    <button type="button" class="btn btn-primary chatOut" onclick="send()">发送
                                    </button>
                                </div>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jquery
============================================ -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>

<!-- bootstrap JS
============================================ -->
<script src="js/bootstrap.min.js"></script>
<!-- wow JS  动画效果js
============================================ -->
<script src="js/wow.min.js"></script>
<!-- price-slider JS
============================================ -->
<script src="js/jquery-price-slider.js"></script>
<!-- meanmenu JS
============================================ -->
<script src="js/jquery.meanmenu.js"></script>
<!-- owl.carousel JS
============================================ -->
<script src="js/owl.carousel.min.js"></script>
<!-- sticky JS
============================================ -->
<script src="js/jquery.sticky.js"></script>
<!-- scrollUp JS
============================================ -->
<script src="js/jquery.scrollUp.min.js"></script>
<!-- counterup JS
============================================ -->
<script src="js/counterup/jquery.counterup.min.js"></script>
<script src="js/counterup/waypoints.min.js"></script>
<script src="js/counterup/counterup-active.js"></script>
<!-- mCustomScrollbar JS
============================================ -->
<script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/scrollbar/mCustomScrollbar-active.js"></script>
<!-- metisMenu JS
============================================ -->
<script src="js/metisMenu/metisMenu.min.js"></script>
<script src="js/metisMenu/metisMenu-active.js"></script>


<script src="js/sparkline/jquery.sparkline.min.js"></script>
<script src="js/sparkline/jquery.charts-sparkline.js"></script>
<script src="js/sparkline/sparkline-active.js"></script>
<!-- calendar JS
============================================ -->
<script src="js/calendar/moment.min.js"></script>

<script src="js/calendar/fullcalendar.min.js"></script>
<script src="js/calendar/fullcalendar-active.js"></script>
<!-- plugins JS
============================================ -->
<script src="js/plugins.js"></script>
<!-- main JS
============================================ -->
<script src="js/main.js"></script>

<!-- tawk chat JS  聊天系统js
<script src="js/tawk-chat.js"></script>
============================================ -->

<script src="js/data-table/bootstrap-table.js"></script>
<script src="js/data-table/bootstrap-table-zh-CN.js"></script>

<script src="js/notifications/Lobibox.js"></script>

<script src="js/datepicker/bootstrap-datetimepicker.min.js"></script>
<script src="js/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/jquery.validate.min.js" type="application/javascript"></script>
<script src="localization/messages_zh.min.js"></script>
<script src="js/my/meValidate.js"></script>

<script src="js/vue.js"></script>
<script src="customjs/eventSourcesNotify.js"></script>
<link rel="stylesheet" href="customcss/ul_style.css">
</body>
<script>

    var baseUrl="http://localhost:8080/posterior_system_war_exploded/";

    function changChat(aTag) {
        var num = $(aTag).children('span').html();
        //获取所有左侧盒子（除了选中的）
        var lis = $(aTag).parent('li').siblings();
        //获取所有右侧盒子
        var divs = $('#sc_right').children();
        console.log(num);
        $.each(lis, function (i, val) {
            //将除了选中的盒子的样式移除
            $(val).removeClass();
        })
        //选中的盒子添加样式
        $(aTag).parent('li').addClass("active");
        $.each(divs, function (i, val) {
            console.log(val);
            $(val).css('display', 'none');
        })
        $("#"+num).css('display', 'block');
    }

    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8887");
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        // 连接成功，注册自己
        websocket.send("register|admin");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        //从后台获取信息
        var contents = innerHTML.split("|");
        if ($("#" + contents[1]).length > 0) {
            $("#" + contents[1] + "_mes").append("<li><div class='she'><span>客户</span><p>" + contents[2] + "</p></div></li>");
        } else {
            $("#sc_left").append("<li><a href='#' onclick='changChat(this)'>客户<span>" + contents[1] + "</span></a></li>");
            $("#sc_right").append("<div id='" + contents[1] + "' class='c'>" +
                "                      <div class='modal-header'>" +
                "                          <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&larr;</span></button>" +
                "                          <h4 class='modal-title'>客户" + contents[1] + "</h4>" +
                "                      </div>" +
                "                      <div class='modal-body'>" +
                "                          <div class='chat_room'>" +
                "                               <ul class='message' id='" + contents[1] + "_mes'>" +
                "                                  <li><div class='she'><span>客户</span><p>" + contents[2] + "</p></div></li>" +
                "                              </ul>" +
                "                          </div>" +
                "                      </div>" +
                "                      <div class='modal-footer'>" +
                "                          <div class='chat_out'>" +
                "                              <textarea class='form-control chatText' placeholder='联系客户...'></textarea>" +
                "                              <button type='button' class='btn btn-primary chatOut' onclick='send(" + contents[1] + ",this)'>发送</button>" +
                "                          </div>" +
                "                      </div>" +
                "                  </div>");
        }
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send(b_id,btnTag) {
        //发送信息到后端
        var message = $(btnTag).siblings();
        console.log(b_id);
        console.log(message);
        $("#" + b_id + "_mes").append("<li><div class='me'><p>" + message.val() + "</p><span>我</span></div></li>");
        websocket.send("chat|" + b_id + "|" + message.val());
        message.val('');
    }

    //用户登出
    function logOut() {



        $.ajax({
            url: baseUrl+"login/out",
            method: 'get',
            dataType: "json",
            async:true,
            success:function (_data) {
                console.log("----datas.code----");
                console.log(_data.code);
                if (_data.code>0){
                    console.log("--成功--");
                    window.location.href =  baseUrl;
                }else {
                    showErrorBox("退出失败");
                }
            }
        })
    }
</script>
